<template>
  <div class="xd-LearningHome-LearningSubject">
    <div class="cover-container">
      <img class="cover-image" :src="imageSrc" />
    </div>
    <div class="subject-title" :title="detail.topicTitle">
      <p>{{detail.topicTitle}}</p>
    </div>
    <div class="subject-card">
      <div class="card-title">
        <img src="@/assets/imgs/kxw_01.png" />
      </div>
      <div class="card-content news">
        <div class="card-cell">
          <div
            class="news-cell"
            v-for="(item, idx) in newsForm.list"
            :key="'notice1' + idx"
            @click="goNews(item)"
          >
            <span class="news-title">·{{item.v_notice_title}}</span>
            <span class="news-time">{{item.dtm_publish_date}}</span>
          </div>
        </div>
        <el-pagination
          @size-change="newsSizeChange"
          @current-change="newsPageChange"
          :current-page="newsForm.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="newsForm.size"
          :layout="PAGE_LAYOUT"
          :total="newsForm.total"
        ></el-pagination>
      </div>
    </div>
    <div class="subject-card">
      <div class="card-title">
        <img src="@/assets/imgs/xkc_02.png" />
      </div>
      <div class="card-content">
        <div class="course_panel">
          <div
            class="item"
            v-for="item in detail.curriculumList"
            :key="item.curriculumId"
            @click="goCourse(item)"
          >
            <img class="cover" :src="item.imgUrl" />
            <div class="course_body">
              <p class="title" v-text="item.curriculumTitle"></p>
              <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
              <p class="p_top">
                授课人：
                <span>{{item.curriculumTeacher}}</span>
                <!-- <span class="credits_tag">
                  学分：
                  <span class="text_color_429688">{{item.curriculumPoints}}</span>
                </span> -->
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="subject-card">
      <div class="card-title">
        <img src="@/assets/imgs/ksj_03.png" />
      </div>
      <div class="card-content">
        <div class="course_panel">
          <div
            class="item"
            v-for="item in detail.paperExaminationList"
            :key="item.paperId"
            @click="goExam(item)"
          >
            <img class="cover" :src="item.imgUrl" />
            <div class="course_body">
              <p class="title" v-text="item.paperTitle"></p>
              <!-- <p class="p_top">课程时长：{{item.curriculumTimeLong}}</p>
              <p class="p_top">
                授课人：
                <span>{{item.curriculumTeacher}}</span>
                <span class="credits_tag">
                  学分：
                  <span class="text_color_429688">{{item.curriculumPoints}}</span>
                </span>
              </p>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="subject-card">
      <div class="card-title">
        <img src="@/assets/imgs/zlx_03.png" />
      </div>
      <div class="card-content">
        <div class="course_panel">
          <el-button
            v-for="(item, key) in detail.paperCurriculumList"
            :key="key"
            size="mini"
            type="primary"
            style="color:white; margin-bottom: 10px; margin-left: 10px;"
            @click="goPractice(item)"
          >{{item.paperTitle}}</el-button>
        </div>
      </div>
    </div>
    <div class="subject-card">
      <div class="card-title">
        <img src="@/assets/imgs/pfx_04.png" />
      </div>
      <div class="card-content">
        <MyComments :commentsInfo="commentForm.list" :loading="commentForm.loading"></MyComments>
        <el-pagination
          @size-change="commentSizeChange"
          @current-change="commentPageChange"
          :current-page="commentForm.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="commentForm.size"
          :layout="PAGE_LAYOUT"
          :total="commentForm.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
const MyComments = () => import('../../../components/MyComments')

export default {
  name: 'LearningSubject',
  components: {
    MyComments
  },
  data() {
    return {
      imageSrc: require('@/assets/imgs/xuexi_banner.png'),
      topicId: '',
      detail: {},
      commentForm: {
        page: 1,
        size: 10,
        total: 0,
        list: [],
        loading: false
      },
      newsForm: {
        page: 1,
        size: 10,
        total: 0,
        list: []
      }
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/LearningHome/Subject')
    this.topicId = this.$route.query.tid

    this.fetchDetail()
    this.getNews()
    this.getCommentList()
  },
  methods: {
    fetchDetail() {
      utils.post('topic/get', {
        topicId: this.topicId
      }, res => {
        if (res.success) {
          this.detail = res.data
          this.detail.paperCurriculumList.sort((a,b)=>a.createTime > b.createTime ? 1 : -1)
          if (this.detail.detailImgUrl) {
            this.imageSrc = this.detail.detailImgUrl
          }
        }
      })
    },
    goView(path) {
      this.$router.push(path)
    },
    goCourse(item) {
      this.$router.push({
        path: '/LearningHome/Learning/CourseIntroduction',
        query: {
          tid: item.curriculumId
        }
      })
    },
    goExam(item) {
      utils.setItem('ExamInstructionsPaperInfo', item)
      this.$router.push({
        path: '/LearningHome/OnlineExams/ExamInstructions',
        query: {
          id: item.paperId
        }
      })
    },
    goNews(item) {
      this.$router.push({
        path: '/LearningHome/PoliticalNews/NewsDetail',
        query: {
          id: item.i_id
        }
      })
    },
    goPractice(item) {
      utils.setItem('ExamInstructionsPaperInfo', item);
      this.$router.push({ path: '/LearningHome/OnlineExams/ExamInstructions', query: { examType: 2 } });
    },
    // TODO
    fetchNewsList() { },
    // TODO
    fetchCommentList() { },
    commentSizeChange(value) {
      this.commentForm.size = value
      this.getCommentList()
    },
    commentPageChange(value) {
      this.commentForm.page = value
      this.getCommentList()
    },
    newsSizeChange(value) {
      this.newsForm.size = value
      this.fetchNewsList()
    },
    newsPageChange(value) {
      this.newsForm.page = value
      this.getNews()
    },
    getNews() {
      utils.post('topic/get/newsList', { topicId: this.topicId, pageNumber: this.newsForm.page, pageSize: this.newsForm.size }, res => {
        if (res.success) {
          this.newsForm.list = res.data.rows
          this.newsForm.total = res.data.total
        }
      })
    },
    getCommentList() {
      utils.post('topic/get/commentList', { topicId: this.topicId, pageNumber: this.commentForm.page, pageSize: this.commentForm.size }, res => {
        if (res.success) {
          var temp = res.data.rows.map(item => {
            return Object.assign(item, {
              avatar: '',
              questionUserName: item.questionUserName,
              questionContent: item.questionContent
            })
          })
          this.commentForm.list = temp
          this.commentForm.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-LearningSubject {
  margin-top: 40px;
  p {
    margin: 0px;
    padding: 0px;
  }
}
.cover-container {
  height: 370px;
  text-align: center;
  margin-bottom: 55px;
}
.cover-image {
  width: 1200px;
  height: 100%;
}
.subject-title {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 30px;
  color: #333333;
  text-align: center;
  margin-bottom: 45px;
  // word-wrap: break-word;
  // overflow-wrap: break-word;
  // white-space: pre-wrap;
  // word-break: break-all;
  overflow: hidden;
  p {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.subject-card {
  border: 1px solid #cacaca;
  margin-bottom: 20px;
  background-color: #ffffff;
}
.card-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #cacaca;
  padding: 10px 45px 0 45px;

  img {
    padding-bottom: 3px;
    border-bottom: solid 3px #429687;
  }
}
.card-title-main {
  font-size: 24px;
  color: #429687;
  padding: 10px 0;
  border-bottom: 3px solid #429687;
}
.card-title-more {
  font-size: 16px;
  color: #999999;
  margin-top: 20px;
}
.card-content {
  padding: 40px 45px;
  &.news {
    // display: flex;
    // justify-content: center;
    // align-items: center;
  }
}
.card-cell {
  flex: 1;
  margin: 0px 0px 45px 0px;
}
.content-left {
  border-right: 1px solid #cacaca;
  padding-right: 30px;
}
.content-right {
  padding-left: 30px;
}
.news-cell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dcdfe6;
}
.news-title {
  font-size: 16px;
  color: #333333;
  cursor: pointer;
}
.news-time {
  font-size: 16px;
  color: #999999;
}
.course_panel {
  display: flex;
  flex-wrap: wrap;

  .item {
    cursor: pointer;
    width: 200px;
    height: auto;
    background-color: #ffffff;
    border-radius: 0.21vw;
    border: solid 0.05vw #e9e9e9;
    margin-right: 0.52vw;
    margin-bottom: 0.52vw;
    display: flex;
    flex-direction: column;
    .cover {
      display: block;
      width: 100%;
      height: 8.59vw;
    }

    .course_body {
      padding: 0.89vw;
      color: #666666;
      font-size: 0.73vw;

      p {
        display: flex;
        align-items: center;
      }

      .p_top {
        margin-top: 0.45vw;
      }

      .title {
        font-size: 0.83vw;
        color: #333333;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .credits_tag {
        margin-left: auto;
      }
    }
  }
}
</style>
